<template>
  <div align="center">
    <div class="w-80 h-80 border flex justify-center items-center">
      <div class="w-4/5 h-4/5 bg-light-500/50 rounded-full relative">
        <!-- 中心点 -->
        <div class="w-2 h-2 bg-dark-500 rounded-full abso z-10"></div>

        <!-- 指针 -->

        <div
          class="w-1 h-1/5 bg-dark-500/50 rounded-md absolute left-1/2 transform -translate-x-1/2 top-3/10 origin-bottom z-20"
          :style="animateStyle"
        ></div>

        <div class="w-full h-full">
          <div
            v-for="(prize, index) in prizes.items"
            :key="prize.id"
            class="absolute w-full h-full pt-4"
            :style="{
              transform: `rotate(${(index + 1) * singleAngle}deg)`,
            }"
          >
            <div
              class="absolute w-px h-1/2 bg-dark-500/50 transform left-1/2 top-0 origin-bottom z-0"
              :style="{
                transform: `rotate(${singleAngle / 2}deg)`,
              }"
            ></div>
            <div class="text-xs">
              <p>{{ prize.name }}</p>
              <p>{{ prize.value }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <button class="btn mt-12" @click="startGame">START GAME</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'TurnTable',
};
</script>

<script setup lang="ts">
interface Prize {
  id: number;
  name: string;
  value: number;
}

const prizes = reactive({
  items: [
    { id: 1, name: '一等奖', value: 100 },
    { id: 2, name: '二等奖', value: 50 },
    { id: 3, name: '三等奖', value: 30 },
    { id: 4, name: '四等奖', value: 20 },
    { id: 5, name: '五等奖', value: 10 },
    { id: 6, name: '六等奖', value: 5 },
  ] as Prize[],
  result: { id: 5, name: '五等奖', value: 10 } as Prize,
  prizeIndex: -1,
});

const singleAngle = computed(() => 360 / prizes.items.length);

const isStart = ref(false);

const params = reactive({
  config: {
    duration: 2000,
    circle: 7,
    easing: 'ease-in-out',
  },
});

const allAngle = computed(() => {
  return (
    360 * params.config.circle +
    singleAngle.value / 2 +
    prizes.prizeIndex * singleAngle.value +
    createRandom(2, singleAngle.value - 2)
  );
});

function createRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

const animateStyle = computed(() => {
  return isStart.value
    ? {
        transform: `rotate(${allAngle.value}deg)`,
        transition: `all ${params.config.duration}ms ${params.config.easing}`,
      }
    : {
        transform: `rotate(${0}deg)`,
        transition: `all ${params.config.duration}ms ${params.config.easing}`,
      };
});

const startGame = () => {
  const res = prizes.items.findIndex((item) => item.id === prizes.result.id);
  console.log(res);

  prizes.prizeIndex = res;

  isStart.value = true;
};
</script>

<style scoped>
.abso {
  @apply absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2;
}
</style>
